<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-28 13:13:39
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-17 15:53:25
 * @Description: 收藏菜单
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <DtDialog v-model="visible" @close="handleClose" :append-to-body="true" :isFooterSlot="false" :size="'large'"
        :hiddenFullBtn="true" title="收藏管理" class="collectDialog" :loading="loading">
        <div class="collectContent">
            <div class="left-box">
                <DtTree ref="treeRef" :treeData="stateData.treeData" @node-click="handleNodeClick"
                    :current-node-key="stateData.currentKey" node-key="id" :default-expanded-keys="stateData.expendData"
                    :highlight-current="true" :default-expand-all="false">
                </DtTree>
            </div>
            <div class="right-box">
                <div class="menList" v-for="(item, index) in stateData.menuData" :key="index">
                    <div class="headTitle">{{ item.catalog }}</div>
                    <el-row :gutter="16" class="allMenu">
                        <el-col :span="8" v-for="(menu, ind) in item.menuList" :key="ind" class="menuItem">
                            <div class="item">
                                <div class="menuName" @click="changeStatus(menu)">{{ menu.menuName }}</div>
                                <svg-icon icon-class="star-filled" class="starFilled" v-if="menu.checked"
                                    @click="changeStatus(menu)" v-loading="loading" />
                                <svg-icon icon-class="star" class="star" v-else @click="changeStatus(menu)"
                                    v-loading="loading" />
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </DtDialog>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import { menuList, menuTree } from '../../api/types'
import Node from 'element-plus/es/components/tree/src/model/node'
import { getLoginUserApp, getCollectMenuSelector, addCollectMenu, deleteCollectMenu } from '../../api/index'
const vm = getCurrentInstance()!
const { $modal, useDialog } = vm.appContext.config.globalProperties
const { visible, closeDialog, openDialog } = useDialog()
const treeRef = ref()
const loading = ref(false)
const emits = defineEmits(['edited'])
interface dataType {
    treeData: treeData[];
    menuData: menuTree[];
    currentKey: string;
    expendData: string[]
}
interface treeChildren {
    appCode: string;
    id: string;
    label: string;
}
interface treeData {
    id: string,
    label: string,
    children: treeChildren[]
}
const stateData = reactive<dataType>({
    treeData: [],
    menuData: [],
    currentKey: '',
    expendData: ['']
})
/**
 * @description: 初始化数据
 * @return {*}
 */
function initData(): void {
    getUserApp()
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
function handleClose(): void {
    closeDialog()
    stateData.menuData = []
}
/**
 * @description: 改变收藏状态
 * @return {*}
 */
async function changeStatus(menu: menuList): Promise<void> {
    try {
        loading.value = true
        const func = menu.checked ? deleteCollectMenu : addCollectMenu
        await func({ menuCode: menu.menuCode })
        const message = menu.checked ? '取消成功' : '添加成功'
        $modal.msgSuccess(message)
        menu.checked = !menu.checked
        emits('edited')
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}
/**
 * @description: 获取当前登录用户有权限的应用列表
 * @return {*}
 */
async function getUserApp(): Promise<void> {
    const res = await getLoginUserApp()
    stateData.treeData = res.data.map(v => {
        return {
            id: v.appTypeId,
            label: v.appTypeName,
            children: v.appList.map(k => {
                return {
                    id: k.appId,
                    label: k.appName,
                    appCode: k.appCode
                }
            })
        }
    })
    stateData.currentKey = stateData.treeData[0].children[0].id
    stateData.expendData = [stateData.treeData[0].id]
    nextTick(() => {
        treeRef.value.setCurrentKey(stateData.treeData[0].children[0].id)
    })
    getMenuSelector(res.data[0].appList[0].appCode)
}
/**
 * @description: 点击树节点
 * @return {*}
 */
async function handleNodeClick(data: treeChildren, node: Node): Promise<void> {
    if (!node.isLeaf) return
    getMenuSelector(data.appCode)
}
/**
 * @description: 获取收藏菜单选择数据
 * @return {*}
 */
async function getMenuSelector(appCode: string): Promise<void> {
    const menuDataList = await getCollectMenuSelector({ appCode: appCode })
    stateData.menuData = menuDataList.data
}
defineExpose({
    initData,
    openDialog
})
</script>
<style lang="scss">
.collectDialog {

    .el-dialog__body {
        border-top: 1px solid #DCDFE6 !important;
    }

    .collectContent {
        width: 100%;
        display: flex;

        .left-box {
            width: 192px;
            box-sizing: border-box;
            padding: 12px 16px 0 0;
            border-right: 1px solid #DCDFE6;

            .tree {
                width: 100%;
            }
        }

        .right-box {
            box-sizing: border-box;
            padding: 12px 0 0 16px;

            .menList {
                margin-bottom: 24px;

                .headTitle {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 22px;
                    color: #131414;
                    margin-bottom: 8px;
                }

                .allMenu {
                    width: 704px;

                    .menuItem {
                        margin-top: 8px;
                        width: 224px;

                        .item {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            background: #FAFAFA;
                            box-sizing: border-box;
                            padding: 8px;
                        }
                    }

                }
            }

            .menList:last-child {
                margin-bottom: 0;
            }
        }
    }

    ::-webkit-scrollbar {
        width: 0px !important;
    }
}
.menuName {
    cursor: pointer;
}

.starFilled {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
}

.star {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
}

</style>